﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>轮播图插件版</title>
	<link rel="stylesheet" type="text/css" href="../css/swiper.css" />
	<script src="../lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.swiper-wrapper {
			width: 100%;
			height: 427px;
		}

		.swiper-slide {
			width: 100%;
			height: 427px;
			font-size: 50px;
			line-height: 350px;
			text-align: center;
		}

		.swiper-slide img {
			width: 100%;
			height: 427px;
		}

		.swiper-pagination-bullet {
			display: inline-block;
			margin: 0 10px;
			width: 16px;
			height: 16px;
			line-height: 30px;
			background-color: #ccc;
			border-radius: 50%;
		}

		.swiper-pagination-bullet-active {
			background: blue;
			box-shadow: 0 0 0 2px rgb(255, 255, 255);
		}
	</style>
</head>

<body>
	<div class="swiper-container" id="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<a href="###"><img src="../img/banner.jpg" alt=""></a></div>
			<div class="swiper-slide">
				<a href="###"><img src="../img/banner1.jpg" alt=""></a></div>
			<div class="swiper-slide">
				<a href="###"><img src="../img/banner2.jpg" alt=""></a></div>
			<div class="swiper-slide">
				<a href="###"><img src="../img/banner3.jpg" alt=""></a></div>
			<div class="swiper-slide">
				<a href="###"><img src="../img/banner4.jpg" alt=""></a></div>
			<div class="swiper-slide">
				<a href="###"><img src="../img/banner5.jpg" alt=""></a></div>
			<div class="swiper-slide">
				<a href="###"><img src="../img/banner6.jpg" alt=""></a></div>
		</div>
		<!--按钮-->
		<!-- <div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div> -->
		<!--分页-->
		<div class="swiper-pagination"></div>
	</div>
</body>
<script type="text/javascript">
	var swiper = new Swiper('.swiper-container', {
		autoplay: {//自动轮播
			delay: 2000,//间隔时间
			disableOnInteraction: false //拖拽完后还能继续自动轮播
		},
		loop: true,//无缝 环路
		// navigation: {//上下按钮
		// 	nextEl: '.swiper-button-next',
		// 	prevEl: '.swiper-button-prev'
		// },
		pagination: {//焦点跟随
			el: '.swiper-pagination',
			clickable: true,//点击焦点跳到指定图片
			renderBullet: function (index, className) {
				return '<span class="' + className + '">' + '</span>';//生成焦点数字
			}
		}
		// mousewheel: true//滚动滑轮可以切图
		// // effect: 'cube'//选用:效果
	});

</script>
</html>